<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片列表</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background: #ddd;
		}
		#wrap{
			width: 930px;
			height: 620px;
			margin: 20px auto 0; 
		}

		#path-nav{
			padding: 5px 0px;
		}

		#path-nav a{
			text-decoration: none;
			color: #000;
			font-size: 14px;
		}
		#path-nav a:hover{
			text-decoration: underline;
			font-weight: bold;
		}
		#wrap ul li{
			list-style:none;
			width: 226px;
			height: 300px;
			border:3px solid transparent;
			float: left;
			overflow: hidden;		
		}
		#wrap ul li:hover{
			border:3px solid #1acc93;
		}
		#wrap ul li img{
			width: 100%;
			height: 100%;
			transition:transform 0.6s;
		}
		#wrap ul li:hover img{
			transform: scale(1.2);
		}
		#dic{
			position: fixed;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			display: none;
		}
		#pic{
			position: fixed;
			top:calc(50% - 305px); 
			left:calc(50% - 230px); 
			width: 460px;
			height: 610px;
			padding: 5px;
			background: #fff;	
			display: none;
		}
		#pic img{
			width: 100%;
			height: 100%;
		}
		#left,#right{
			position: absolute;
			top: calc(50% - 30px);
			width: 30px;
			height: 60px;
			background: #fff;
			cursor: pointer;
			line-height: 60px;
			text-align: center;
			font-size: 30px;
		}
		#left{
			left: -40px;
		}
		#right{
			right: -40px;
		}
	</style>
</head>
<body>
	
	<div id="wrap">
		<div id="path-nav">
			<a href="/">相册列表</a> /
			<a href="#">我的相册</a>
		</div>
		<ul>
			<% for(var i=0;i<data.length;i++) { %>
			<li><img src="http://www.lyang.top/static/upload/photo/<%= data[i].imgpath %>"/></li>
			<% } %>
			
		</ul>
	</div>
	<div id="dic"></div>
	<div id="pic">
		<img src="/images/1.jpg" id="photo" />
		<div id="left">&lt</div>
		<div id="right">&gt</div>
	</div>
<script type="text/javascript">
	var oLi=document.getElementsByTagName("li");

	var len=oLi.length;
	var index=0;
	for(var i=0;i<len;i++){
		oLi[i].i=i;
		oLi[i].onclick=function(){
			index=this.i;
			$('dic').style.display='block';
			$('pic').style.display='block';
			play();
		};
	}
	$('dic').onclick=function(){
		$('dic').style.display='none';
		$('pic').style.display='none';
	};
	$('right').onclick=function(){
		index ++;
		index %=len;
		play();
	};
	$('left').onclick=function(){
		index --;
		if(index<0)index=len-1;
		play();
	}
	function play(){
		var oSrc=oLi[index].children[0].src;
			$('photo').src=oSrc;
	};
	function $(id){
		return document.getElementById(id);
	}
</script>
</body>
</html>